---
title: CLI | gluestack-ui

description: A CLI tool for seamlessly adding components from Gluestack UI to your projects.

---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="with-nativewind/Home/Getting Started/CLI" />

# CLI

The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into your project. It provides commands for initialising and adding components to your project.

> Installation using gluestack-ui CLI in Expo projects supports for Expo SDK 50 and above. For Expo SDK < 49, please refer to the manual installation guide [here](https://gluestack.io/ui/docs/home/getting-started/installation).

## Init

Use init command to set up your project.

The init command adds the necessary `gluestack-ui.config.json` file, includes the `GluestackUIProvider`, installs dependencies, and configures above files for your project.
- `metro.config.js`
- `babel.config.js`
- `next.config.js` ( for Next.js)
- `tailwind.config.js`
- `global.css` (for Tailwind CSS)
- entry file (for your project)


```bash
npx gluestack-ui init
```

> Note: If you wish to make changes to your project manually, you can refer to the [installation](/ui/docs/home/getting-started/installation) guide.

### Options:

- `--path <path>`: Specifies the directory path where you want to add the GluestackUIProvider component. By default, it creates the component in the `components/ui` directory within your project's root.

```bash
Usage: npx gluestack-ui init [options]

initialize your gluestack-ui and install dependencies

Options:
  --path <path>    Path to add GluestackUIProvider, defaults to components/ui in the current directory.
```

## Add

Use the `add` command to add components and their dependencies to your project:

```bash
npx gluestack-ui add [component]
```

### Options:

- `--all`: This flag can be used to add all available components from gluestack-ui to your project.
- `--path <path>`: Specifies the directory path where you want to add the component. By default, it will add the component to the same directory where the GluestackUIProvider is located.

```bash
Usage: npx gluestack-ui add [component] [options]

add component to your project

Options:
  --all          Adds all existing components from gluestack-ui
  --path <path>  Path to add components, defaults to the directory where GluestackUIProvider is located.
```

## gluestack-ui.config.json

Configuration for your project.

The `gluestack-ui.config.json` file holds the configuration for your project. It helps the CLI understand how your project is set up and add components accordingly.

> Note : The gluestack-ui.config.json file is optional. It is only required if you use the CLI to add components to your project. If you prefer to manually copy and paste components, this file is not needed.

Manual creation of gluestack-ui.config.json file is not necessary. It will be automatically generated upon executing the following command:

```bash
npx gluestack-ui init
```

## tailwind

### tailwind.config

Path to where your `tailwind.config.js` file is located.

```bash
{
  "tailwind": {
    "config": "tailwind.config.js",
  }
}
```

### tailwind.css

Path to the CSS file (`global.css`) where Tailwind styles are likely imported into your project.

```bash
{
  "tailwind": {
    "css": "global.css"
  }
}
```

## app

### app.entry

Path to your project's entry file

```bash
{
  "app": {
    "entry": "app/_layout.tsx",
  }
}
```

### app.components

Specifies the directory path where the `GluestackUIProvider` component is located.

```bash
{
  "app": {
    "components": "components/ui",
  }
}
```
